<!-- 可以自定义高度，无单选功能 -->
<template>
    <div>
        <el-table
            :data="tableData"
            border
            style="width: 100%"
            ref="table"
            :height="curHeight"
            @selection-change="handleSelectionChange"
            :row-style="{height: '40px'}"
            :cell-style="{padding: '0'}"
        >
            <!-- 是否开启选择框 begin -->
            <el-table-column type="selection" width="40" v-if="hasSelect"> </el-table-column>
            <!-- 是否开启选择框 end -->
            <!-- 字段列展示 begin -->
            <el-table-column label="序号" align="center" width="60" fixed>
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <!-- 列头只有一行，没有合并的情况 -->

            <!-- 列头有合并的情况 -->
            <el-table-column
                :prop="item.prop"
                :label="item.label"
                :width="item.width ? item.width : 'auto'"
                :align="item.align ? item.align : 'center'"
                v-for="(item, index) in tableColumn"
                :key="index"
            >
                <template slot-scope="scope">
                    <slot :name="scope.row[item.prop]" :params="scope.row">
                        {{ item.dictName ? getDictValue(item.dictName, scope.row[item.prop]) : scope.row[item.prop] }}
                    </slot>
                </template>
                <div v-if="item.children && item.children.length > 0">
                    <el-table-column
                        :prop="child.prop"
                        :label="child.label"
                        :width="child.width ? child.width : 'auto'"
                        :align="child.align ? child.align : 'center'"
                        v-for="(child, cIndex) in item.children"
                        :key="cIndex"
                    >
                        <template slot-scope="scope">
                            <slot :name="scope.row[child.prop]" :params="scope.row">
                                {{ child.dictName ? getDictValue(child.dictName, scope.row[child.prop]) : scope.row[child.prop] }}
                            </slot>
                        </template>
                    </el-table-column>
                </div>
            </el-table-column>
            <!-- 字段列展示 end -->

            <!-- 操作按钮集合 begin -->
            <el-table-column
                v-if="tableBtn && tableBtn.length > 0"
                fixed="right"
                label="操作"
                :width="btnListWidth ?? tableBtn.length * 45"
            >
                <template slot-scope="scope">
                    <el-button
                        v-if="tableBtn.includes('edit')"
                        @click.native.prevent="editRow(scope.$index, tableData)"
                        type="text"
                        size="small"
                    >
                        编辑
                    </el-button>
                    <el-button
                        v-if="tableBtn.includes('view')"
                        @click.native.prevent="viewRow(scope.$index, tableData)"
                        type="text"
                        size="small"
                    >
                        详情
                    </el-button>
                    <el-button
                        v-if="tableBtn.includes('lookSMJ')"
                        @click.native.prevent="lookSMJRow(scope.$index, tableData)"
                        type="text"
                        size="small"
                    >
                        查看扫描件
                    </el-button>
                    <el-button
                        v-if="tableBtn.includes('delete')"
                        @click.native.prevent="deleteRow(scope.$index, tableData)"
                        type="text"
                        size="small"
                        style="color: red"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
            <!-- 操作按钮集合 end -->
        </el-table>
        <div class="mcCommonPager" v-if="tableData && tableData.length > 0">
            <el-pagination
                background
                :layout="'prev, pager, next,total,sizes'"
                :total="count"
                :page-size="size"
                :current-page="current"
                @current-change="pageChange"
                :page-sizes="[20, 100, 500, 1000, 5000]"
                @size-change="handleSizeChange"
            >
                >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {PopupCommon} from '@/libs/popupCommon'
import {Utility} from '@/libs/utility'

// pageNo 当前第几页
// pageSize 每页条数

export default {
    props: {
        /** 数据源：这里不确定字段，只要是数组就可以 */
        dataSource: {
            /** 这里不确定字段，只要是数组就可以 */
            type: Array,
            required: true
        },
        /** 自定义列 */
        tableColumns: {
            /** 格式： [{prop:"",label:"",width:"",children:[{prop:"",label:"",width:""]}] 其中宽度可以不写，目前只支持列头合并两行的情况，暂未做动态循环配置。 */
            type: Array,
            required: true
        },
        /** 操作按钮集合 */
        btnList: {
            /** 格式：['edit','view','delete','lookSMJ'] ，可以给空 */
            type: Array
        },
        btnListWidth: {
            type: String,
            require: false
        },
        /** 一页显示多少条数据 */
        pageSize: {
            type: Number,
            require: true
        },
        /** 总共有多少条数据 */
        pageCount: {
            type: Number,
            require
        },
        /** 当前第几页 */
        pageNo: {
            type: Number,
            require
        },
        /** 是否开启勾选框 */
        selection: {
            type: Boolean
        },
        /** 高度 */
        height: {
            type: Number,
            require
        }
    },
    computed: {
        tableData() {
            return this.dataSource
        },
        tableColumn() {
            return this.tableColumns
        },
        tableBtn() {
            return this.btnList
        },
        size() {
            return this.pageSize
        },
        count() {
            return this.pageCount
        },
        current() {
            return this.pageNo
        },
        hasSelect() {
            return this.selection
        },
        curHeight() {
            return this.height
        }
    },
    data() {
        return {
            multipleSelection: []
        }
    },
    methods: {
        handleSizeChange(e) {
            this.$emit('handleSizeChange', e)
        },
        getDictValue(dictType, dictValue) {
            let finishValue = dictValue
            const list = Utility.getDictList(dictType)
            if (list && list.length > 0 && typeof dictValue != 'undefined' && dictValue != null) {
                dictValue = dictValue.toString()
                if (dictValue.indexOf(',') != -1) {
                    dictValue = dictValue.split(',')
                    finishValue = list
                        .filter((t) => dictValue.includes(t.value))
                        .map((t) => t.label)
                        .join(',')
                } else {
                    const item = list.find((t) => t.value == dictValue)
                    if (typeof item != 'undefined') {
                        finishValue = item.label
                    }
                }
            }
            return finishValue
        },
        editRow(i, d) {
            const data = {
                index: i,
                data: d[i]
            }
            this.$emit('editRow', data)
        },
        viewRow(i, d) {
            const data = {
                index: i,
                data: d[i]
            }
            this.$emit('viewRow', data)
        },
        lookSMJRow(i, d) {
            const data = {
                index: i,
                data: d[i]
            }
            this.$emit('lookSMJRow', data)
        },
        deleteRow(i, d) {
            PopupCommon.confirm('此操作将删除该数据, 是否继续?')
                .then(() => {
                    const data = {
                        index: i,
                        data: d[i]
                    }
                    this.$emit('deleteRow', data)
                })
                .catch(() => {
                    // 这里尽量写下，否则会报警告异常。
                    console.log('已取消删除')
                })
        },
        // 页码点击事件,p当前页
        pageChange(p) {
            this.$emit('pageChange', p)
        },
        /** 改变选中行的值 */
        handleSelectionChange(val) {
            this.multipleSelection = val
            this.$emit('tableHeightHandleSelectionChange', val)
        }
    },
    mounted() {}
}
</script>

<style scoped>
.mcCommonPager {
    margin-top: 10px;
    background-color: #fff;
    padding: 5px 0;
    text-align: right;
}
</style>
